<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button type="button" onclick="addItem()">Add item</button>
    </div>

    <ul>
      <!-- <li><span>12312</span><button type="button" onclick="deleteTheDom()">Delete</button></li> -->
    </ul>

    <script>
      document.getElementById("item").value = "";

      function addItem(){
          var itemValue = document.getElementById("item").value;
          if(!itemValue){
            alert("请输入值");
            return false;
          }
          document.getElementById("item").value = "";
          var _ulDom = document.getElementsByTagName("ul")[0];
          var _li = document.createElement("li");
          var  _span = document.createElement("span");
          var _spanTextNode = document.createTextNode(itemValue);    
          _span.appendChild(_spanTextNode);
          var  _button = document.createElement("button");
          _button.setAttribute("type","button");
          _button.setAttribute("onclick","deleteTheDom(this)");

          
          var _buttonTextNode = document.createTextNode("Delete");  
          _button.appendChild(_buttonTextNode);
          
          _li.appendChild(_span);
          _li.appendChild(_button);
          _ulDom.appendChild(_li); 

      }
      function deleteTheDom(_ob){
        var _ulDom = document.getElementsByTagName("ul")[0];
        _ulDom.removeChild(_ob.parentNode);
      }

    </script>
  </body>
</html>